<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/dayjs.min.js"></script>
    <title>过滤器</title>
</head>
<body>
    <!-- 
        过滤器：
            定义：对要显示的数据进行特定格式化后再显示（适用一些简单的额逻辑处理）
            语法：
                1、注册过滤器： Vue.filter(name, callback)或 new Vue(filters:{})
                2、使用过滤器：{{xxx | 过滤器名}}或v-bind:属性="xxx | 过滤器名"
            备注：
                1、过滤器也可以接收额外参数、多个过滤器也可以串联
                2、并没有改变原本的数据，是产生新的对应数据
     -->
    <div id="root">
        <button @click="getNowTime">获取当前时间</button>
        <h2>当前时间{{time}}</h2>
        <!-- 计算属性实现 -->
        <h2>格式化后的时间：{{formatTime}}</h2>
        <!-- 过滤器实现 -->
        <h2>格式化后的时间（过滤器实现）:{{time | timeFmtFilter}}</h2>
        <h2>格式化后的时间（携带参数并截取前4位）:{{time | timeFmtFilter('YYYY_MM_DD') | mySlice}}</h2>
        <h2 :x="msg | mySlice">过滤器也支持动态绑定</h2>
    </div>
    <script type="text/javascript">
        //定义全局过滤器
        Vue.filter('mySlice',function(value){
            return value.slice(0,4)
        })
        const vm = new Vue({
            el:"#root",
            data(){
                return {
                    time: "",
                    msg:"12345"
                }
            },
            computed:{
                formatTime(){
                    return this.time ? dayjs(this.time).format('YYYY-MM-DD HH:mm:ss'):'点击按钮获取当前时间'
                }
            },
            methods:{
                getNowTime(){
                    const time = new Date()
                    this.time = time.toLocaleString()
                }
            },
            //局部过滤器
            filters:{
                timeFmtFilter(value, str='YYYY-MM-DD HH:mm:ss'){
                    console.log('@',this)//这里的this是window
                    return value ? dayjs(value).format(str):'点击按钮获取当前时间'
                },
                // mySlice(value){
                //     return value.slice(0,4)
                // }
            }
        })
    </script>
</body>
</html>